@import "~tachyons-sass/tachyons.scss";
@import "./variables.scss";

$avenir: "avenir next", avenir, sans-serif;
$consolas: Consolas, monaco, monospace;
$helvetica: "helvetica neue", helvetica, sans-serif;
$san-francisco: "San Francisco", "helvetica neue", helvetica, sans-serif;
$regular: $global-font-family;

@mixin theme($text-color, $bg-color, $typeface) {
  color: $text-color;
  background-color: $bg-color;
  font-family: $typeface;

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: $text-color;
  }

  b,
  strong {
    color: $text-color;
  }

  nav {
    font-family: $global-font-family;

    a {
      color: $text-color;

      &.active {
        color: lighten($text-color, 5%);
      }
    }
  }

  p {
    color: $text-color;

    a {
      color: $text-color;
      font-weight: bold;
      text-decoration: underline;
    }
  }

  a.post-colophon-link,
  a.post-colophon-link:visited {
    color: transparentize($text-color, 0.7) !important;
  }

  hr {
    border-color: transparentize($text-color, 0.9) !important;
    width: 90%;
  }

  ul,
  ol {
    color: $text-color;
  }

  time {
    color: $text-color;
    font-weight: bold;
  }

  .markdown-content blockquote {
    border-color: $text-color !important;
  }

  .markdown-content table:not(.highlight) {
    background-color: mix($near-white, $bg-color, 10%);

    tr {
      border-color: mix($near-black, $text-color, 10%);
    }
  }

  .markdown-content p > code {
    background-color: transparentize($text-color, 0.8) !important;
    color: $text-color !important;
  }

  .markdown-content a.footnote-backref {
    color: $text-color;
    font-weight: bold;
  }

  .markdown-content .grvsc-container {
    font-size: 0.875rem !important;
    .grvsc-line {
      padding: 0 1rem;
    }
  }
}

// Lots of great color combos here:
// http://tachyons.io/docs/themes/skins/

.theme-blue-washed-red {
  @include theme($washed-red, $blue, $regular);
}

.theme-washed-green-red {
  @include theme($red, $washed-green, $regular);
}

.theme-washed-blue-red {
  @include theme($red, $washed-blue, $helvetica);
}

.theme-washed-yellow-red {
  @include theme($red, $washed-yellow, $regular);
}

.theme-navy-light-red {
  @include theme($light-red, $navy, $avenir);
}

.theme-near-black-gold {
  @include theme($gold, $near-black, $avenir);
}

.theme-near-black-light-yellow {
  @include theme($light-yellow, $near-black, $regular);
}

.theme-red-light-yellow {
  @include theme($light-yellow, $red, $regular);
}

.theme-purple-light-gray {
  @include theme($light-gray, $purple, $regular);
}

.theme-light-gray-purple {
  @include theme($purple, $light-gray, $regular);
}

.theme-run {
  @include theme(rgb(224, 237, 94), rgb(26, 26, 26), $regular);
}


// Custom themes

.theme-sign-in-with-apple {
  @include theme($black, $near-white, $san-francisco);
}

.theme-checklist-manifesto {
  @include theme(rgba(219, 87, 43, 1), rgba(251, 248, 222, 1), $regular);
}

.theme-enron {
  @include theme(#9eebcf, #111111, $regular);
}

.theme-boardgames {
  @include theme(#111111, #daedf0, $regular);
  background: linear-gradient(
    240deg,
    rgba(108, 149, 199, 1) 0%,
    rgba(218, 237, 240, 1) 26%,
    rgba(212, 235, 237, 1) 39%,
    rgba(187, 225, 224, 1) 63%,
    rgba(242, 238, 225, 1) 100%
  );
}
